<script setup>
const props = defineProps(['type'])
</script>

<template>
    <div class="button" :class="[props.type ? `button--${props.type}` : '']">
        <slot></slot>
    </div>
</template>

<style scoped>
.button {
    min-width: 96px;
    height: 36px;
    line-height: 36px;
    margin-left: 12px;
    padding: 0 20px;
    text-align: center;
    border-radius: 2px;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.1s;
}
.button--cancel {
    color: #999;
    background-color: #464646;
}
.button--confirm {
    font-weight: 500;
    color: #fff;
    background-color: var(--wchime-color-highlight);
}
.button:hover {
    opacity: 0.8;
}
</style>